<!--
 * @Description: 
 * @Version: 2.0
 * @Autor: 刘世琪
 * @Date: 2021-03-11 10:24:34
 * @LastEditors: Seven
 * @LastEditTime: 2021-03-16 13:53:25
-->
<template>
    <div>
          <div>
            <h1>搜索结果页</h1> 
            
        <a-input-search placeholder="请输入您要查询的用户" style="width: 250px" @search="onSearch" />
          
        </div><br>

        <div style="width: 100%;height: calc(100vh - 207px);background: #ffffff;margin-top: 20px;">
       
      <a-table
         rowKey="id"
        :columns="columns"
        :data-source="data"
        :pagination="{ pageSize: 3}"
        :scroll="{ y: clientHeight - 350 }"
      >
        <!-- 操作 -->
        <span slot="action" slot-scope="text, record" >
   

   
            <!-- 添加 -->
            <a-button type="primary" @click="add"><a-icon type="diff" /></a-button>
            <a-modal v-model="visibleadd" title="添加用户" on-ok="addOk">
            <template slot="footer">
                <a-button key="back" @click="handleCancel">取消</a-button>
                <a-button key="submit" type="primary" :loading="loading" @click="addOk">
                    确定
                </a-button>
            </template>
<p><a-input class="ip" v-model="username" placeholder="请输入用户名"><a-icon slot="prefix" type="user"/></a-input></p>
<p><a-input-password class="ip" v-model="password" placeholder="请输入密码"><a-icon slot="prefix" type="lock"/></a-input-password></p>
<!-- <p><a-input class="ip" v-model="phone" placeholder="请输入之前使用手机号"><a-icon slot="prefix" type="phone"/></a-input></p> -->
<p><a-input class="ip" v-model="email" placeholder="请输入之前使用邮箱"><a-icon slot="prefix" type="bank"/></a-input></p>
<p><a-input class="ip" v-model="role" placeholder="请输入用户角色"><a-icon slot="prefix" type="rocket"/></a-input></p>
<!-- <p><a-button type="primary" @click="Put">确认修改</a-button></p>             -->
            </a-modal>



            

                <!-- 编辑 -->
            <a-button type="primary" @click="showDrawer(record)" ><a-icon type="edit" /></a-button>
            <a-button type="danger" @click="del(record)"><a-icon type="delete" /></a-button>
    <a-drawer
      title="编辑"
      width="520"
      :closable="false"
      :visible="visible"
      @close="onClose"
    >

<p><a-input class="ip" v-model="username" placeholder="请输入用户名"><a-icon slot="prefix" type="user"/></a-input></p>
<p><a-input-password class="ip" v-model="password" placeholder="请输入密码"><a-icon slot="prefix" type="lock"/></a-input-password></p>
<!-- <p><a-input class="ip" v-model="phone" placeholder="请输入之前使用手机号"><a-icon slot="prefix" type="phone"/></a-input></p> -->
<p><a-input class="ip" v-model="email" placeholder="请输入之前使用邮箱"><a-icon slot="prefix" type="bank"/></a-input></p>
<p><a-input class="ip" v-model="role" placeholder="请输入用户角色"><a-icon slot="prefix" type="rocket"/></a-input></p>
<p><a-button type="primary" @click="Put">确认修改</a-button></p>

    <a-button type="primary" @click="showChildrenDrawer">
        异步修改密码
      </a-button> 
      <a-drawer
        title="异步修改密码"
        width="320"
        :closable="false"
        :visible="childrenDrawer"
        @close="onChildrenDrawerClose"
      >
    
    <p><a-input-password class="ip" v-model="password" placeholder="请输入密码"/> </p>
        <a-button type="primary" @click="showChildrenDrawer">
          修改密码
        </a-button>
        
      </a-drawer>
      <div
        :style="{
          position: 'absolute',
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e8e8e8',
          padding: '10px 16px',
          textAlign: 'right',
          left: 0,
          background: '#fff',
          borderRadius: '0 0 4px 4px',
        }"
      >
      </div>
    </a-drawer>
          
        </span>
      </a-table>
    </div>

    </div>
</template>

<script>
import dayjs from 'dayjs'
import axios from 'axios'
const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      // dataIndex: 'role_name',
      width: 100,
    },
    {
        title: '用户名',
        dataIndex: 'username',
        // dataIndex: 'role_name',
        width: 100,
    },
    // {
    //     title: '手机号',
    //     dataIndex: 'phone',
    //     // dataIndex: 'role_name',
    //     width: 100,
    // },
    {
        title: '邮箱',
        dataIndex: 'email',
        // dataIndex: 'role_name',
        width: 100,
    },
    {
        title: '角色',
        dataIndex: 'roles[0].title',
        // dataIndex: 'role_name',
        width: 100,
    },
    {
        title: '时间',
        dataIndex: 'create_time',
        // dataIndex: 'role_name',
        width: 100,
    },
    {
      title: '操作',
      key: 'action',
      scopedSlots: { customRender: 'action' },
      width: 200,
    },
  ];
export default {
    data() {
        return {
            data:[],
            id: "",
            username: "",
            password:"",
            phone:"",
            email:"",
            role:'',
            money:'',
            columns, 
            clientHeight: 0,     // 设置默认值
            bser_url:'http://127.0.0.1:8000/',
            // 升级按钮组件
            visible: false,
            visibleadd: false,
            loading: false,
            childrenDrawer: false,
            // create_time:dayjs().format('{YYYY} MM-DDTHH:mm:ss SSS [Z] A') // display
        }
    },
    mounted() {
      // 在DOM渲染数据时，设置下区域高度为浏览器可视区域高度．
      this.clientHeight = document.body.clientHeight;
      this.div_height = document.body.clientHeight - 300;
      // 监听window的resize事件．在浏览器窗口变化时再设置下区域高度．
      // console.log(this.clientHeight);
      const _this = this;
      window.onresize = function temp() {
        _this.clientHeight = document.body.clientHeight;
        _this.div_height = document.body.clientHeight - 300;
      };
    },
    methods: {
        // 时间格式化
        getLocalTime(nS) {     
            return new Date(parseInt(nS) * 1000).toLocaleString().replace(/年|月/g, "-").replace(/日/g, " ");
        },
        // 搜索
        onSearch(name){
            console.log('获取用户信息成功');
            axios({
                url: this.bser_url + 'user_info/',
                params:{
                    sname:name,
                }
            }).then(resp =>{
                // console.log(resp.data)
                this.data = resp.data.data
            })
        },
        // /角色列表的展示
        getRoleList() {
            axios({
                url: this.bser_url + 'user_info/'
            }).then(resp =>{
                console.log(resp.data)
                this.data = resp.data.data;
            })
        },
        // 状态
        onChange(checked){
            if(checked == true){
                this.$message.info('已开启')
                // alert('已开启')
            }else{
                this.$message.info('已关闭')
            }

            // console.log(`a-switch to ${checked}`);
        },
        // 
        showModal() {
            this.visible = true;
        },
        showDrawer(record) {
            this.visible = true;
            this.id = record.id
        },
        // 取消编辑提示
        onClose() {
            this.$message.info('已退出');
            this.visible = false;
        },
        onChildrenDrawerClose() {
            this.childrenDrawer = false;
        },
        // 删除
        del(record){
            const { id } = record
            axios({
                url: this.bser_url + "Userg/",
                method:'delete',
                params:{
                    uid:id    
                },
                data:{
                    ...record,
                }
            }).then(resp =>{
                console.log('del', resp)
                if(resp.data.code == 200) {
                    this.$message.info(resp.data.msg)
                    console.log(resp.data)
                    this.$router.go(0)
                }
            })
        },
        // 修改密码
        showChildrenDrawer() {
            this.childrenDrawer = true;
            const id  = this.id
            console.log('put id', id, this.username)
            axios({
                url: this.bser_url + 'user_info/',
                method:'put',
                params:{
                    uid:id,
                },
                data:{
                   password : this.password 
                }
            }).then(resp =>{
                console.log('showChildrenDrawer', resp)
                if (resp.data.code == 200){
                    // this.$router.go(0)
                    // this.$message.info(resp.data.msg)
                }
                
            })
        },
        // 编辑
        Put(){
            const id  = this.id
            console.log('put id', id, this.username)
            if (id ==""){
                alert('找不到ID')
            }
            // console.log(this.record)
            axios({
                url: this.bser_url + 'Userg/',
                method:'put',
                params:{
                    uid: id,
                },
                data:{
                    username: this.username,
                    password: this.password,
                    // phone:this.phone,
                    role:this.role,
                    email:this.email,
                }
            }).then(resp =>{
                console.log('add', resp)
                if(resp.data.code == 200) {
                    console.log(resp.data)
                    this.$message.info(resp.data.msg)
                    // alert(resp.data.msg)
                    // this.$router.go(0)
                }else{
                    this.$message.info(resp.data.msg)
                    //  alert("修改失败")
                }
            })
        },
        // 添加主键
        add(){
            this.visibleadd = true;
        },
        // 添加 主键和功能
        addOk(e) {
            console.log(e);
            this.loading = true;
            setTimeout(() => {
                this.loading = false;
                this.visibleadd = false;
            },3000)
        },
        // 取消主键
        handleCancel(e) {
           this.visibleadd = false; 
        }
    },
    created() {
        this.getRoleList();
        this.create_time()
    
    }
}
</script>

<style scoped>

</style>
